<!DOCTYPE html>
<html>
<head>
	<title>The latest and greatest music player</title>
	<link rel="stylesheet" type="text/css" media="all" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/ui-darkness/jquery-ui.css"/>
	<link rel="stylesheet" type="text/css"   href="style.css" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
	<!-- TODO: Modernizr reference -->
	<script src="musicplayer-test.jquery.js"></script>
</head>
<body>
	<div id="thePlayer">
	<div id="volume">
		<input type="range" value="30" min="0" max="100" step="2" title="Adjust volume"/>
	</div>
	<audio id="audioPlayer">
		<source src"http://93.95.224.133/fgstests/oggs/flikkflakk.ogg" type="audio/ogg" />
		<source src"http://93.95.224.133/fgstests/oggs/loml.ogg" type="audio/ogg" />
		<source src"http://93.95.224.133/fgstests/oggs/efsur.ogg" type="audio/ogg" />
		<p>Sorry but your browser doesn't support this player</p>
	</audio>	
		<div id="player-title" class="player-frame">
			<span class="title">The latest and greatest music player</span>
		</div>
		<div id="player-control" class="player-frame">
			<div>
				<ul id="control-buttons">
					<li class="ui-state-default ui-corner-all" title="Previous song">
						<span class="ui-icon ui-icon-seek-prev"></span>
					</li>
					<li class="ui-state-default ui-corner-all" title="Play/Pause">
						<span class="ui-icon ui-icon-play"></span>
					</li>
					<li class="ui-state-default ui-corner-all" title="Next song">
						<span class="ui-icon ui-icon-seek-next"></span>
					</li>
					<li class="ui-state-default ui-corner-all" title="Sound on/off">
						<span class="ui-icon ui-icon-volume-on"></span>
					</li>				
				</ul>
				 <input id="progress" type="range" min="0" value="0" max="100" step="1"/> <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
			</div>
		</div>
		<div id="player-playlist" class="player-frame">
			<span class="title">Playlist:</span>
			<ul id="playlist">
				<li><a href="http://93.95.224.133/fgstests/oggs/flikkflakk.ogg" id="song1" onclick="return false">flikkflakk.ogg</a><span></span></li>
				<li><a href="http://93.95.224.133/fgstests/oggs/loml.ogg" id="song2" onclick="return false">loml.ogg</a><span></span></li>
				<li><a href="http://93.95.224.133/fgstests/oggs/efsur.ogg" id="song3" onclick="return false">efsur.ogg</a><span></span></li>
				<li><a href="http://93.95.224.133/fgstests/oggs/Flikk_Flakk.ogg" id="song4" onclick="return false">Flikk_Flakk.ogg</a><span></span></li>
				<li><a href="http://93.95.224.133/fgstests/oggs/Love_of_my_live.ogg" id="song5" onclick="return false">Love_of_my_live.ogg</a><span></span></li>
				<li><a href="http://93.95.224.133/fgstests/oggs/Ef_thu_ert_sur.ogg" id="song6" onclick="return false">Ef_thu_ert_sur.ogg</a><span></span></li>				
				<li><a href="http://93.95.224.133/fgstests/oggs/I Want You.mp3" id="song7" onclick="return false">I Want You.mp3</a><span></span></li>	
			</ul>
		</div>
		<div id="player-status" class="player-frame">
			<marquee loop="infinite">Select a song!</marquee>
		</div>
	</div>
	<script type="text/javascript">
		$(document).ready(function(){
			//note: this version assumes a JAvascript array of songs, but
			// the other approach is also acceptable
			var playlist = ["http://93.95.224.133/fgstests/oggs/flikkflakk.ogg", 
							"http://93.95.224.133/fgstests/oggs/loml.ogg",
							"http://93.95.224.133/fgstests/oggs/efsur.ogg",
							"http://93.95.224.133/fgstests/oggs/Flikk_Flakk.ogg",
							"http://93.95.224.133/fgstests/oggs/Love_of_my_live.ogg",
							"http://93.95.224.133/fgstests/oggs/Ef_thu_ert_sur.ogg",
							"http://93.95.224.133/fgstests/oggs/I Want You.mp3"];
			var playerOptions = {"autoplay": true, "playerTitle": "HTML5 Music Player", "volume":0.3};
			$("#thePlayer").musicPlayer( playlist, playerOptions );
			// Optionally, the function should accept an object containing optional values,
			// such as boolean "autostart" value, i.e. if the player should start playing
			// immediately etc. 		
		});
	</script>
</body>
</html>